<template>
  <div class="app-container">
    <!--    顶部工具栏-->
    <div class="" style="margin-bottom: 10px;width: 100%;height:40px;">

      <span style="float:left;font-family: 'Arial Black';font-size: 25px;line-height: 40px;display: block">平台：</span>
      <el-radio-group style="float: left;" v-model="platformKey" @change="changePlatform">
        <el-radio-button v-for="(pt,index) in PT_TYPE" :label="pt.id">{{pt.display_name}}</el-radio-button>
      </el-radio-group>
      <!--      <el-button type="success" style="margin-left: 20px" icon="el-icon-plus" @click="handleCreate">新增</el-button>-->
    </div>


    <!--数据展示列表-->
    <el-tabs
      v-model="activeName"
      style="margin-top:15px;"
      type="border-card"
      :addable="true"
      @tab-add="addTapList"
      @tab-click="changePane">
      <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
        <keep-alive>
          <tab-pane v-if="activeName==item.key" :tabPaneType="item.key" :platformKey="platformKey" v-bind:list="list"
                    :pt_type="PT_TYPE[platformKey]"
                    @create="showCreatedTimes"/>
        </keep-alive>
      </el-tab-pane>
    </el-tabs>

    <!--    活动列表面板-->
    <el-dialog
      title="活动列表"
      width="80%"
      :close-on-click-modal="false"
      :visible.sync="isVisiblbTabList"
      :before-close="closeTapList">

      <el-button class="el-icon-plus" size="small " style="float:right;margin-bottom: 5px"
                 @click="addActTab_list"></el-button>
      <el-table
        :data="tabList"
        border
        ref="tablist"
        row-key="id"
        show-header
        style="width: 100%"
      >
        <!-- 活动名称-->
        <el-table-column
          label="活动名称"
          min-width="2%"
          align="center">
          <template slot-scope="scope">
            <span style="margin-left: 0px">{{ scope.row.actname}}</span>
          </template>
        </el-table-column>
        <!-- 活动ID-->
        <el-table-column
          label="活动ID"
          min-width="2%"
          align="center">
          <template slot-scope="scope">
            <span style="margin-left: 0px">{{ scope.row.actid}}</span>
          </template>
        </el-table-column>
        <!-- 活动标识（与产品绑定用的）-->
        <el-table-column
          label="活动标识"
          min-width="2%"
          align="center">
          <template slot-scope="scope">
            <span style="margin-left: 0px">{{ scope.row.actcode}}</span>
          </template>
        </el-table-column>
        <!--mediacode-->
        <el-table-column
          label="mediacode"
          min-width="2%"
          align="center">
          <template slot-scope="scope">
            <span style="margin-left: 0px">{{ scope.row.mediacode}}</span>
          </template>
        </el-table-column>
        <!--栏目id    -->
        <el-table-column
          label="栏目id"
          min-width="2%"
          align="center">
          <template slot-scope="scope">
            <span style="margin-left: 0px">{{ scope.row.lanmuid}}</span>
          </template>
        </el-table-column>
        <!-- 产品名称（做活动的产品）-->
        <el-table-column
          label="产品名称"
          min-width="2%"
          align="center">
          <template slot-scope="scope">
            <span style="margin-left: 0px">{{ scope.row.proname}}</span>
          </template>
        </el-table-column>
        <!--上线状态-->
        <el-table-column
          label="上线状态"
          min-width="2%"
          align="center">
          <template slot-scope="scope">
            <!--            <span style="margin-left: 0px">{{ scope.row.alive?"上线":"下线"}}</span>-->
            <el-tag :type="scope.row.alive?'success':'danger'">{{ scope.row.alive?'上线':'下线'}}</el-tag>
          </template>
        </el-table-column>
        <!--所属平台-->
        <el-table-column
          label="所属平台"
          min-width="2%"
          align="center">
          <template slot-scope="scope">
            <span style="margin-left: 0px">{{ PT_TYPE[scope.row.platform].display_name}}</span>
          </template>
        </el-table-column>
        <!--作者-->
        <el-table-column
          label="作者"
          min-width="2%"
          align="center">
          <template slot-scope="scope">
            <span style="margin-left: 0px">{{ scope.row.author}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="4%"
          align="center">
          <template slot-scope="scope">
            <!--          <el-button-group>-->
            <el-button
              icon="el-icon-edit"
              type="primary"
              size="mini"
              @click="handleEdit(scope.row)">
            </el-button>
            <el-popover
              placement="top"
              v-model="scope.row.visible"
              icon="el-icon-info"
              iconColor="red"
              title="确定要删除这条数据吗？"
            >
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="handleDelete(scope.$index, scope.row)">确定</el-button>
              </div>
              <el-button icon="el-icon-delete" slot="reference" size="mini" type="danger"></el-button>

            </el-popover>
            <!--          </el-button-group>-->
          </template>
        </el-table-column>
      </el-table>

    </el-dialog>

    <!--    创建活动面板-->
    <el-dialog
      :title="editTypeTitle[editType]"
      :visible.sync="isVisiblbAddTab"
      :close-on-click-modal="false">
      <el-form ref="formAddTab" :model="tempAddTab" label-position="left" label-width="100px"
               style="width: 400px; margin-left:50px;">
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="tempAddTab.actname"/>
        </el-form-item>
        <el-form-item label="活动ID" prop="actid">
          <el-input v-model="tempAddTab.actid"/>
        </el-form-item>
        <el-form-item label="活动标识" prop="actcode">
          <el-input v-model="tempAddTab.actcode"  placeholder="用于和产品绑定"/>
        </el-form-item>
        <el-form-item label="mediacode" prop="mediacode">
          <el-input v-model="tempAddTab.mediacode"  placeholder="订购/鉴权用的虚拟code"/>
        </el-form-item>
        <el-form-item label="栏目id" prop="lanmuid" >
          <el-input v-model="tempAddTab.lanmuid"  placeholder="仅数字"/>
        </el-form-item>
        <el-form-item label="产品名称" prop="proname">
          <el-input v-model="tempAddTab.proname"/>
        </el-form-item>

        <!--        <el-form-item label="平台" prop="platform">-->
        <!--          <el-input v-model="tempAddTab.platform"/>-->
        <!--        </el-form-item>-->
        <el-form-item label="上线状态" prop="alive">
          <!--          <el-input v-model="tempAddTab.alive"/>-->
          <el-switch
            v-model="tempAddTab.alive"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isVisiblbAddTab = false">
          取消
        </el-button>
        <!--        <el-button type="primary" @click="dialogStatus==='create'?diaCreateData():diaUpdateData()">-->
        <el-button type="primary" @click="confirmCreateAct">
          确定
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { findAll, findActList, createAct, delAct, updateAct } from '@/api/act_dati'
  // import TabPane from './components/TabPane'
  import TabPane from '@/views/klmb/activity/components/TabPane'
  import { parseTime } from '@/utils'

  const PT_TYPE = [
    { id: 0, name: 'yd', display_name: '移动' },
    { id: 1, name: 'dx', display_name: '电信' },
    { id: 2, name: 'lt', display_name: '联通' }
  ]
  export default {
    // name:"tabs",
    components: { TabPane },

    data() {
      return {

        //---系统变量----

        PT_TYPE,//平台分类
        // radio1: 0,
        platformKey: 1,//平台id
        tabMapOptions: [
          // { label: '答题', key: '1001' },
          // { label: '猜词', key: '1002' }
          { label: '暂无数据', key: '-1' }
        ],
        // activeName: '1001',
        activeName: '-1',

        list: [],

        isVisiblbAddTab: false,
        isVisiblbTabList: false,
        tempAddTab: {},

        tempTabModel: {
          id: -1,
          actname: '',
          actcode: '',
          actid: '',
          alive: true,
          platform: this.platformKey,
          author: 'cxy',
          timestamp: '',
          mediacode: '',
          lanmuid: '',
          proname: ''

        },
        visible: false,//这里是显示删除确认框用的
        tabList: [],

        editType: 0,
        editTypeTitle: ['新增', '编辑']

      }
    },

    watch: {
      activeName(val) {
        this.$router.push(`${this.$route.path}?tab=${val}`)
      }
    },
    created() {
      this.PT_TYPE = PT_TYPE
      this.PT_TYPE[0].server = process.env.VUE_APP_CMS_KLMB_ACT_SERVER_DX
      this.PT_TYPE[1].server = process.env.VUE_APP_CMS_KLMB_ACT_SERVER_DX
      this.PT_TYPE[2].server = process.env.VUE_APP_CMS_KLMB_ACT_SERVER_LT
      this.$global.VUE_APP_BASE_API_STB = this.PT_TYPE[this.platformKey].server
      const tab = this.$route.query.tab
      if (tab) {
        this.activeName = tab
      }

      this.getAllList()
      // console.log('process.env.VUE_APP_BASE_API==' + JSON.stringify(this.PT_TYPE[0]))
      // console.log('process.env.VUE_APP_BASE_API==' + process.env.VUE_APP_CMS_KLMB_ACT_SERVER_DX)
    },
    computed: {},
    methods: {
      changePlatform(label) {
        // console.log("changePlatform.label=="+label)
        this.platformKey = label
        this.$global.VUE_APP_BASE_API_STB = this.PT_TYPE[this.platformKey].server
        this.getAllList()

        // console.log("this.platformKey="+this.platformKey)
      },

      showCreatedTimes() {
        // this.createdTimes = this.createdTimes + 1
        console.log('2222')

      },

      changePane(tab, event) {
        console.log('changePane=' + tab.name)
        this.getActData()
      },

      getActData() {
        let param = {
          actid: this.activeName,
          platform: this.platformKey
        }

        console.log('param=' + JSON.stringify(param))
        findAll(param).then(
          (response) => {
            console.log(' response.data==' + JSON.stringify(response.data))
            let tempList = response.data
            // if( typeof tempList == "Array"){
            //
            // }
            for (let i = 0; i < response.data.length; i++) {
              response.data[i].visible = false
              response.data[i].tempUrl = ''
              response.data[i].tempImgUpload = false
              // console.log("codename="+ typeof  response.data[i].codename)
              let temp =  response.data[i].codename.split('_')
              response.data[i].codename_sham = temp[0]

              // response.data[i].url = this.PT_TYPE[this.platformKey - 1].server + response.data[i].url
              // response.data[i].url = response.data[i].url
            }

            this.list = response.data
          }
        )
      },

      getAllList() {

        this.tabMapOptions = []
        findActList({ pt: this.platformKey }).then(
          (response) => {
            if (response.code == '20000') {
              this.tabList = response.data

              if (this.tabList.length > 0) {

                this.tabMapOptions = []

                for (let i = 0; i < this.tabList.length; i++) {
                  let panel = { label: this.tabList[i].actname, key: this.tabList[i].actid }
                  this.tabMapOptions.push(panel)
                }

                this.activeName = this.tabList[0].actid
                this.platformKey = this.tabList[0].platform
                console.log(JSON.stringify(this.tabMapOptions))
                this.getActData()

              } else {
                this.tabMapOptions.push({ label: '暂无数据', key: '-1' })
              }

            }
          }
        )

      },

      /**
       *
       * 活动列表
       * */
      addTapList() {
        this.isVisiblbTabList = true
        this.editType = 0

      },

      closeTapList() {

        console.log('closeTapList')
        if (this.tabList.length > 0) {
          this.getAllList()
        }
        this.isVisiblbTabList = false

      },

      /**
       *
       * 新增活动
       * */
      confirmCreateAct() {

        let edittype = this.editType
        this.isVisiblbAddTab = false
        this.tempAddTab.timestamp = parseTime(new Date())

        if (edittype == 0) {
          createAct(this.tempAddTab).then((response) => {

            if (response.code == '20000') {
              //需要返回id
              this.tempAddTab.id = response.data
              this.tabList.push(this.tempAddTab)
            } else {
              this.$notify({
                title: '创建失败',
                message: 'error:' + response.data,
                type: 'error',
                duration: 2000
              })
            }
          })
        } else if (edittype == 1) {
          updateAct(this.tempAddTab).then((response) => {
            if (response.code == '20000') {
              //需要返回id
              this.tempAddTab.id = response.data
              // this.tabList.push(this.tempAddTab)
            } else {

              this.$notify({
                title: '更新失败',
                message: 'error:' + response.data,
                type: 'error',
                duration: 2000
              })
            }
          })
        }

      },

      /**
       * 新增活动面板
       */
      addActTab_list() {
        this.isVisiblbAddTab = true

        this.tempTabModel.platform = this.platformKey
        this.tempAddTab = Object.assign({}, this.tempTabModel)
      },

      handleEdit(row) {
        this.isVisiblbAddTab = true
        this.tempAddTab = row
        this.editType = 1
      },

      handleDelete(index, row) {

        delAct(row).then((response) => {
        // delAct({ id: row.id }).then((response) => {
          if (response.code == '20000') {
            this.$notify({
              title: 'Success',
              message: 'Delete Successfully',
              type: 'success',
              duration: 2000
            })
            this.tabList.splice(index, 1)
            this.tabMapOptions.splice(index,1)
          } else {
            this.$notify({
              title: '删除失败',
              message: 'error:' + response.data,
              type: 'error',
              duration: 2000
            })
          }
        })

      }

    }
  }
</script>

<style scoped>
  .app-container {
    margin: 30px;
  }

</style>

